<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-for='tab in tabs' @click='currComp=tab.comp'>{{tab.label}}</button>
			<component :is='currComp'></component>
		</div>
		<script>
			var app = Vue.createApp({
				data(){
					return {
						currComp: 'intro-comp',
						tabs:[
							{comp:'intro-comp', label:'商品介绍组件'},
							{comp:'comment-comp',label:'商品评价组件'},
							{comp:'question-comp',label:'商品常见问答'}
						]
					}
				}
			})
			app.component('intro-comp',{
				template: '<div>商品介绍信息内容</div>'
			})
			app.component('comment-comp',{
				template: '<div>商品评价信息内容</div>'
			})
			app.component('question-comp',{
				template: '<div>商品常见问答内容</div>'
			})
			
			var vm = app.mount("#app")
		</script>
	</body>
</html>
